<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/global.js"></script>
		<style>
			#topStyle: {
				font-size: 100px;
			}
		</style>
	</head>

	<body>
		<!--<div style="text-align: center;"><a class="layui-btn layui-btn-xs layui-btn-normal" id="oldinfo" style="font-size: 20px;">全部已读</a></div>
		<p style="text-align: center;">-----------------<span style="font-size: 20px;">未读动态</span>
			------------------</p>
		<div id="mynav">

		</div>
		<p style="text-align: center;">------------------<span style="font-size: 20px;">以下为已读动态</span>------------------</p>
		<div id="mynav2">
		</div>-->
		
		<h2 style="color: grey;" align="center">未读消息动态<a class="layui-btn layui-btn-xs" id="oldinfo">全读</a></h2>
			
		<!--未读消息-->
		<div id="mynav"></div>
		
		<h2 style="color: grey;" align="center">已读消息动态</h2>
		
		<!--已读消息-->
		<div id="mynav2"></div>

		<script>
			layui.use(['form', 'table', 'layer', 'element'], function() {
				var form = layui.form;
				var table = layui.table;
				var layer = layui.layer;
				var $ = layui.$;
				var element = layui.element;

				$.post(globalData.server + "message/getMessages?token=" + globalData.getToken(), {
					id: globalData.getCurUid()
				}, function(res) {
					$("#mynav").html("");
					var id;
					for (var i = 0; i < res.data.length; i++) { //遍历父节点
						console.log(res.data[i].messageState);
						if(res.data[i].isOpen == "未打开") {
							id=res.data[i].id;
							var str =
								'<ul style="border-radius:25px; border: 2px solid; background:lightblue"><li class="layui-nav-item" style="margin-left:10px;"><span style="font-size: 16px; font-weight:bold;">' +
								res.data[i].sendName + "</span><span style='margin-left:300px;'>" + res.data[i].createTime +
								'</span></li><li class="layui-nav-item" style="font-size:16px;margin-left:10px;">' +"内容【"+res.data[i].messageContent +
								"】---<span style='font-size:17px;'>(" + res.data[i].stuName +
								')</span><div style="margin-left:430px;"><button class="layui-btn layui-btn-sm layui-btn-normal" onclick="dq('+id+')">读取</button></div></li></ul></br>'
							$("#mynav").append(str);
						} else {
							var str =
								'<ul style="border-radius:25px; border: 2px solid; background:lightblue"><li class="layui-nav-item" style="margin-left:10px;"><span style="font-size: 16px; font-weight:bold;">' +
								res.data[i].sendName + "</span><span style='margin-left:300px;'>" + res.data[i].createTime +
								'</span></li><li class="layui-nav-item" style="font-size:16px;margin-left:10px;">' +"内容【"+ res.data[i].messageContent +
								"】---<span style='font-size:17px;'>(" + res.data[i].stuName + ')</span></li></ul></br>'
							$("#mynav2").append(str);
						}

					}
					element.render('mynav'); //重新对导航进行渲染。	
				})

					$("#oldinfo").click(function() {
					$.post(globalData.server + "message/updateBathMessage", {
						token: globalData.getToken(),
						uid: globalData.getCurUid()
					}, function(res) {
						layer.msg(res.msg);
						window.location.reload();
					})
				})

				
			})
			
			
			/* 点击 */
			function dq(cid){
				$.post(globalData.server + "message/updateMessage?token=" + globalData.getToken(), {
						id: cid
					},
					function() {
						window.location.reload();
					}, "json")
					
			}
			/* 点击 */
		</script>
	</body>
</html>